<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #fei{
            width: 300px;
            height: 100px;
            margin: auto;
            border: 1px solid black;
        }
    </style>
    <!-- 1 -->
    <div id="fei">
        <div><input type="checkbox" v-model="selectAll"><span>全选</span></div><hr>
        <div v-for="item in shoppingCart">
            <input type="checkbox" v-model="item.checked"><span>{{item.name}}</span>
        </div>  
    </div>

    <!-- 2 -->
    <style>
        #fei1{
            margin: 80px auto 0;
        }
        .doupo{
            height: 50px;
            width: 100%;
            position: fixed;
            top: 102px;
            left: 0;
            background-color: aqua;
        }
        .horizontalLine{
            height: 3px;
            background: rgb(16 158 222);
        }
    </style>
</body>
<script src="./vue.js"></script>
<script>
    const {createApp,ref,computed,watchEffect} = Vue
    
    
    createApp({
        setup(){
            let shoppingCart = ref([{
                name:'雷鑫',
                checked:false
            },{
                name:'杨凯斐',
                checked:false
            },{
                name:'赫阳',
                checked:false
            }])

            const selectAll = computed({
					get(){
						return shoppingCart.value.every(v=>v.checked)
					},
					set(newVal){
						if(newVal){
							shoppingCart.value.forEach(v=>{
								v.checked = true
							})
						}else{
							shoppingCart.value.forEach(v=>{
								v.checked = false
							})
						}
						
					}
				})

            return{
                shoppingCart,
                selectAll
            }
        }
    }).mount('#fei')

    createApp({
        setup(){
            let hengxian = ref(0)
           
            return{
                hengxian
            }
        }
    }).mount('#fei1')
</script>
</html>